<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>百慧智慧wms仓库</title>
  <link href="../layui/css/layui.css" rel="stylesheet">
</head>
<body>
    <div class="layui-container">


        <div class="layui-row">
            <!-- 月入库产品数量,柱状图 -->
            <div class="layui-col-md6">
                <div id="prodIn" style="width: 100%;height:400px;"></div>
            </div>
            <!-- 月出库产品数量,柱状图 -->
            <div class="layui-col-md6">
                <div id="prodOut" style="width: 100%;height:400px;"></div>
            </div>
        </div>
        <!-- 月入库/出库金额,折线图 -->
        <div class="layui-row">
            <div id="prodMoney" style="width: 100%;height:400px;"></div>
        </div>
    </div>
    <script src="../layui/layui.js"></script>
    <script src="../js/echarts.js"></script>

    <script>

        layui.use(["jquery","layer"],function () {

            /*获取jquery实例对象*/
            let $ = layui.jquery;
            let layer = layui.layer;

            /*月入库产品数量,柱状图*/
            $.getJSON("/getStatisticsInMonth",function (d) {
                if(d.code===0){
                    let prodIn = echarts.init(document.getElementById('prodIn'));
                    prodIn.setOption({
                        title: {
                            text: '月入库量',
                            subtext: '百惠大脑AI运算平台提供数据支持',
                            left: 'left'
                        },
                        tooltip: {},
                        legend: {
                            data: ['入库增长量']
                        },
                        xAxis: {
                            data: d.obj.times
                        },
                        yAxis: {},
                        series: [
                            {
                                name: '销量',
                                type: 'bar',
                                data: d.obj.counts
                            }
                        ]
                    });
                }else{
                    layer.msg(d.msg);
                }

            });


            /*月出库产品数量,柱状图*/
            $.getJSON("/getStatisticsOutMonth",function (d) {
                let prodOut = echarts.init(document.getElementById('prodOut'));
                prodOut.setOption({
                    title: {
                        text: '月出库量',
                        subtext: '百惠大脑AI运算平台提供数据支持',
                        left: 'left'
                    },
                    tooltip: {},
                    legend: {
                        data: ['出库增长量']
                    },
                    xAxis: {
                        data: d.obj.times
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '销量',
                            type: 'bar',
                            data: d.obj.counts
                        }
                    ]
                });
            });

            /*月入库/出库金额,折线图*/
            $.getJSON("/getStatisticsMonthMoney",function (d) {
                if(d.code===0){
                    let prodMoney = echarts.init(document.getElementById('prodMoney'));
                    prodMoney.setOption({
                        title: {
                            text: '月出入库金额',
                            subtext: '百惠大脑AI运算平台提供数据支持',
                            left: 'left'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['入库金额', '出库金额']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: d.obj.times
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '入库金额',
                                type: 'line',
                                stack: 'Total',
                                data: d.obj.recordInPrice
                            },
                            {
                                name: '出库金额',
                                type: 'line',
                                stack: 'Total',
                                data: d.obj.recordOutPrice
                            }
                        ]
                    });
                }else{
                    layer.msg(d.msg);
                }

            });

        });
    </script>

</body>
</html>